<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">系统管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 顶部的表单 -->
      <el-form ref="elForm" :model="userVO" label-width="auto">
        <el-row>
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select v-model="userVO.departmentId" placeholder="请选择部门">
                <el-option
                  v-for="item in departmentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px"
                    ><el-tag size="small">{{ item.deptCount }}</el-tag></span
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名" prop="field102">
              <el-input
                v-model="userVO.username"
                placeholder="请输入用户名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input
                v-model="userVO.email"
                placeholder="请输入邮箱"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-radio-group v-model="userVO.sex" size="medium">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
                <el-radio label="">全部</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input
                v-model="userVO.nickname"
                placeholder="请输入昵称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <!-- 这里是用的element的栅格系统 -->
          <el-col :span="18">
            <el-button icon="el-icon-refresh" size="medium" @click="reset">
              重置
            </el-button>
            <el-button
              type="success"
              icon="el-icon-search"
              size="medium"
              @click="searchList"
            >
              查询
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="medium"
              @click="addUser"
            >
              添加
            </el-button>
            <el-button icon="el-icon-download" size="medium" @click="getExcel">
              导出
            </el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 表格 -->
      <!--表格内容显示区域-->
      <el-table :data="userList" border max-height="400" style="width: 100%">
        <el-table-column prop="id" label="#" width="50"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="110">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <!-- 如何获取循环的对象 useList  双重三元表达式 -->
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "保密" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          sortable
          label="所属部门"
          width="180"
        >
        </el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180">
        </el-table-column>
        <el-table-column sortable prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="150">
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <!-- scope表示当前表中的一行数据 -->
          <template slot-scope="scope">
            <!-- scope.row表示这一行的对象 -->
            <el-switch
              v-model="scope.row.status"
              active-color="#ff4949"
              inactive-color="#cccccc"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-s-tools"
          ></el-button>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 7, 8, 9]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 用户添加的弹框 -->
      <UserAdd
        :addOrUpdateVisible="addOrUpdateVisible"
        :departmentList="departmentList"
        @changeShow="showAddOrUpdate"
      ></UserAdd>
    </el-card>
  </div>
</template>

<script>
import UserAdd from "@/views/user/UserAdd.vue";
import { findUserList, exportExcel } from "@/api/user.js";
import { getDepartNameAndCount } from "@/api/department.js";
export default {
  name: "User",
  data() {
    return {
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
      current: 1,
      size: 6,
      userList: [],
      total: 0,
      departmentList: [],
      userVO: {
        departmentId: "",
        username: "",
        emial: "",
        sex: "",
        nickname: "",
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    showAddOrUpdate() {
      this.addOrUpdateVisible = false;
    },
    //添加用户
    addUser() {
      this.addOrUpdateVisible = true;
    },
    //重置
    reset() {
      this.userVO = {};
      this.getUserList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getUserList();
    },
    async getUserList() {
      let result = await findUserList(this.current, this.size, this.userVO);
      this.userList = result.data.userPage.records;
      this.total = result.data.userPage.total;
    },
    searchList() {
      this.current = 1;
      this.getUserList();
    },

    async getDepartList() {
      let result = await getDepartNameAndCount();
      this.departmentList = result.data.departments;
    },

    //导出excel
    async getExcel() {
      exportExcel(this.userVO)
        .then((res) => {
          //这里没有返回数据,但是要在响应头中进行下载操作
          // 将二进制文件转化为可访问的url
          let url = window.URL.createObjectURL(new Blob([res]));
          //创建一个a标签
          var a = document.createElement("a");
          //将a标签添加到body中
          document.body.appendChild(a);
          //为a标签设置href
          a.href = url;
          //设置下载的名字
          a.download = "用户列表.xls";
          //模拟点击
          a.click();
          //使用windows窗体执行下载
          window.URL.revokeObjectURL(url);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getUserList();

    this.getDepartList();
  },
  components: {
    UserAdd,
    UserAdd,
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 10px;
}

.el-form-item {
  padding: 0px 5px;
}

.el-pagination {
  margin-top: 10px;
}
</style>